<template>
  <div class="team-chat-room">
    <!-- 聊天室头部 -->
    <div class="chat-header">
      <div class="header-left">
        <el-icon class="chat-icon"><ChatDotRound /></el-icon>
        <span class="team-name">{{ currentTeam?.name || '团队聊天室' }}</span>
        <el-tag v-if="onlineCount > 0" size="small" type="success">
          {{ onlineCount }} 人在线
        </el-tag>



        <!-- 加密任务指示器 -->
        <el-tooltip
          v-if="activeEncryptionTasks > 0"
          content="正在处理加密任务"
          placement="bottom"
        >
          <el-tag size="small" type="info" class="encryption-task-indicator">
            <el-icon class="rotating"><Loading /></el-icon>
            {{ activeEncryptionTasks }}
          </el-tag>
        </el-tooltip>
      </div>
      <div class="header-right">
        <el-button
          size="small"
          :icon="Search"
          @click="showSearchDialog = true"
        >
          搜索消息
        </el-button>
        <el-button
          size="small"
          :icon="isFullscreen ? FullScreen : FullScreen"
          @click="toggleFullscreen"
          :title="isFullscreen ? '退出全屏' : '全屏聊天'"
        >
          {{ isFullscreen ? '退出全屏' : '全屏' }}
        </el-button>
        <el-button
          size="small"
          :icon="More"
          @click="showMoreMenu = !showMoreMenu"
        />
      </div>
    </div>

    <!-- 消息列表区域 -->
    <div class="messages-container" ref="messagesContainer">
      <div class="messages-list" ref="messagesList">
        <!-- 加载更多历史消息 -->
        <div v-if="hasMoreHistory" class="load-more-history">
          <el-button
            size="small"
            :loading="loadingHistory"
            @click="loadMoreHistory"
          >
            加载更多历史消息
          </el-button>
        </div>

        <!-- 消息列表 -->
        <div
          v-for="message in messages"
          :key="message.id"
          class="message-wrapper"
          :class="{ 'own-message': message.senderId === currentUserId }"
        >
          <!-- 文本消息 -->
          <TextMessage
            v-if="message.messageType === 'text'"
            :message="message"
            :is-own="message.senderId === currentUserId"
          />
          
          <!-- 图片消息 -->
          <ImageMessage
            v-else-if="message.messageType === 'image'"
            :message="message"
            :is-own="message.senderId === currentUserId"
          />
          
          <!-- 文件消息 -->
          <FileMessage
            v-else-if="message.messageType === 'file'"
            :message="message"
            :is-own="message.senderId === currentUserId"
          />
        </div>

        <!-- 正在输入指示器 -->
        <div v-if="typingUsers.length > 0" class="typing-indicator">
          <el-icon class="typing-icon"><Loading /></el-icon>
          <span>{{ typingText }}</span>
        </div>
      </div>
    </div>

    <!-- 消息输入区域 -->
    <div class="message-input-area">
      <!-- 文件上传进度 - 简化显示，避免与传输列表重复 -->
      <div v-if="uploadingFiles.length > 0" class="upload-progress-area">
        <div class="upload-summary">
          <el-icon class="upload-icon"><Upload /></el-icon>
          <span class="upload-text">
            正在发送 {{ uploadingFiles.length }} 个文件...
          </span>
          <el-button
            size="small"
            text
            @click="showTransferDialog = true"
            title="快速查看进度"
          >
            查看进度
          </el-button>
        </div>
      </div>

      <!-- 主输入区域 -->
      <div class="main-input-area">
        <!-- 输入框容器 -->
        <div class="input-wrapper">
          <el-input
            v-model="inputMessage"
            type="textarea"
            :rows="1"
            :autosize="{ minRows: 1, maxRows: 4 }"
            :maxlength="4000"
            resize="none"
            placeholder="输入消息... (Enter发送，Shift+Enter换行)"
            @keydown="handleKeyDown"
            @input="handleTyping"
            class="message-input"
          />
        </div>

        <!-- 工具栏和发送按钮 -->
        <div class="input-controls">
          <!-- 左侧工具栏 -->
          <div class="input-toolbar">
            <el-button
              :icon="Picture"
              @click="selectImage"
              title="发送图片"
              text
              class="toolbar-btn"
            />
            <el-button
              :icon="Paperclip"
              @click="selectFile"
              title="发送文件"
              text
              class="toolbar-btn"
            />
          </div>

          <!-- 右侧发送按钮 -->
          <div class="send-area">
            <span v-if="inputMessage.length > 0" class="char-count">
              {{ inputMessage.length }}/4000
            </span>
            <el-button
              type="primary"
              :disabled="!canSendMessage"
              :loading="sendingMessage"
              @click="sendMessage"
              size="small"
              class="send-btn"
            >
              发送
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 隐藏的文件选择器 -->
    <input
      ref="imageInputRef"
      type="file"
      accept="image/*"
      multiple
      style="display: none"
      @change="handleImageSelect"
    />
    <input
      ref="fileInputRef"
      type="file"
      multiple
      style="display: none"
      @change="handleFileSelect"
    />

    <!-- 搜索对话框 -->
    <el-dialog
      v-model="showSearchDialog"
      title="搜索消息"
      width="600px"
    >
      <div class="search-container">
        <el-input
          v-model="searchKeyword"
          placeholder="输入关键词搜索消息"
          @keyup.enter="searchMessages"
        >
          <template #append>
            <el-button :icon="Search" @click="searchMessages" />
          </template>
        </el-input>
        
        <!-- 搜索结果 -->
        <div v-if="searchResults.length > 0" class="search-results">
          <div
            v-for="result in searchResults"
            :key="result.id"
            class="search-result-item"
            @click="scrollToMessage(result.id)"
          >
            <div class="result-sender">{{ result.senderName }}</div>
            <div class="result-content">{{ result.content }}</div>
            <div class="result-time">{{ formatTime(result.timestamp) }}</div>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 传输进度弹窗 -->
    <el-dialog
      v-model="showTransferDialog"
      title="文件传输进度"
      width="500px"
      :close-on-click-modal="false"
    >
      <div class="transfer-dialog-content">
        <div v-if="uploadingFiles.length === 0" class="empty-state">
          <el-empty description="当前没有正在传输的文件" />
        </div>
        <div v-else class="upload-list">
          <div
            v-for="upload in uploadingFiles"
            :key="upload.id"
            class="upload-item-dialog"
          >
            <div class="file-info">
              <el-icon><Document /></el-icon>
              <div class="file-details">
                <div class="file-name">{{ upload.fileName }}</div>
                <div class="file-status">
                  {{ upload.status === 'uploading' ? '上传中' :
                     upload.status === 'completed' ? '已完成' : '上传失败' }}
                </div>
              </div>
              <div class="progress-info">{{ upload.progress }}%</div>
            </div>
            <el-progress
              :percentage="upload.progress"
              :status="upload.status === 'failed' ? 'exception' :
                      upload.status === 'completed' ? 'success' : undefined"
              :stroke-width="6"
            />
          </div>
        </div>
      </div>

      <template #footer>
        <el-button type="primary" @click="showTransferDialog = false">
          关闭
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ChatDotRound,
  Search,
  More,
  Loading,
  Document,
  Picture,
  Paperclip,
  Upload,
  FullScreen,
  Lock
} from '@element-plus/icons-vue'

// 组件导入
import TextMessage from './messages/TextMessage.vue'
import ImageMessage from './messages/ImageMessage.vue'
import FileMessage from './messages/FileMessage.vue'

// 组合函数导入
import { useTeamChatStore } from '@/stores/teamChat'
import { useAuthStore } from '@/stores/auth'
import { useEncryptionStore } from '@/stores/encryption'
import { useFileUpload } from '@/composables/useFileUpload'
import { validateFileSize, validateFileType } from '@/config/upload'

// 类型定义
interface TeamMessage {
  id: number
  teamId: number
  senderId: number
  senderName: string
  senderAvatar?: string
  messageType: 'text' | 'image' | 'file'
  content: string
  fileName?: string
  fileSize?: number
  fileUrl?: string
  messageStatus: 'sending' | 'sent' | 'failed'
  timestamp: number
}

interface UploadingFile {
  id: string
  fileName: string
  progress: number
  status: 'uploading' | 'completed' | 'failed'
}

// Props
interface Props {
  teamId: number
}

const props = defineProps<Props>()

// 状态管理
const route = useRoute()
const teamChatStore = useTeamChatStore()
const authStore = useAuthStore()
const encryptionStore = useEncryptionStore()
const { uploadFiles, isUploading, uploadSessions } = useFileUpload()

// 响应式数据
const messagesContainer = ref<HTMLElement>()
const messagesList = ref<HTMLElement>()
const imageInputRef = ref<HTMLInputElement>()
const fileInputRef = ref<HTMLInputElement>()

const inputMessage = ref('')
const sendingMessage = ref(false)
const loadingHistory = ref(false)
const showSearchDialog = ref(false)
const showMoreMenu = ref(false)
const showTransferDialog = ref(false)
const isFullscreen = ref(false)
const searchKeyword = ref('')
const searchResults = ref<TeamMessage[]>([])
const uploadingFiles = ref<UploadingFile[]>([])
const typingUsers = ref<string[]>([])
const typingTimer = ref<NodeJS.Timeout>()

// 计算属性
const currentUserId = computed(() => authStore.user?.id)
const currentTeam = computed(() => teamChatStore.currentTeam)
const messages = computed(() => teamChatStore.currentTeamMessages)
const onlineCount = computed(() => teamChatStore.currentTeamOnlineMembers.length)
const hasMoreHistory = computed(() => teamChatStore.hasMoreHistory)

// 加密相关计算属性
const encryptionEnabled = computed(() => teamChatStore.encryptionEnabled)
const isEncryptionAvailable = computed(() => encryptionStore.isAvailable)
const encryptionHealthy = computed(() => encryptionStore.isHealthy)
const activeEncryptionTasks = computed(() => encryptionStore.activeTaskCount)

const canSendMessage = computed(() => {
  return inputMessage.value.trim().length > 0 && 
         !sendingMessage.value && 
         !isUploading.value
})

const typingText = computed(() => {
  if (typingUsers.value.length === 1) {
    return `${typingUsers.value[0]} 正在输入...`
  } else if (typingUsers.value.length > 1) {
    return `${typingUsers.value.length} 人正在输入...`
  }
  return ''
})

// 方法
const loadMoreHistory = async () => {
  if (loadingHistory.value) return
  
  loadingHistory.value = true
  try {
    await teamChatStore.loadMoreMessages(props.teamId)
  } catch (error) {
    ElMessage.error('加载历史消息失败')
  } finally {
    loadingHistory.value = false
  }
}

const sendMessage = async () => {
  if (!canSendMessage.value) return
  
  const content = inputMessage.value.trim()
  inputMessage.value = ''
  sendingMessage.value = true
  
  try {
    await teamChatStore.sendTeamMessage(props.teamId, content, 'text')
    scrollToBottom()
  } catch (error) {
    ElMessage.error('发送消息失败')
  } finally {
    sendingMessage.value = false
  }
}

const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault()
    sendMessage()
  }
}

const handleTyping = () => {
  // 发送正在输入指示
  teamChatStore.sendTypingIndicator(props.teamId)
  
  // 清除之前的定时器
  if (typingTimer.value) {
    clearTimeout(typingTimer.value)
  }
  
  // 3秒后停止输入指示
  typingTimer.value = setTimeout(() => {
    teamChatStore.stopTypingIndicator(props.teamId)
  }, 3000)
}

const selectImage = () => {
  imageInputRef.value?.click()
}

const selectFile = () => {
  fileInputRef.value?.click()
}

const handleImageSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  const files = Array.from(target.files || [])
  if (files.length > 0) {
    uploadTeamFiles(files, 'image')
  }
  target.value = ''
}

const handleFileSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  const files = Array.from(target.files || [])
  if (files.length > 0) {
    uploadTeamFiles(files, 'file')
  }
  target.value = ''
}

/**
 * 团队聊天专用文件类型验证 - 不限制任何文件类型
 */
const validateTeamChatFileType = (file: File): {
  valid: boolean
  message?: string
} => {
  // 团队聊天中不限制任何文件类型，允许发送所有类型的文件
  return { valid: true }
}

const uploadTeamFiles = async (files: File[], messageType: 'image' | 'file') => {
  // 文件验证
  const invalidFiles: string[] = []

  for (const file of files) {
    const sizeValidation = validateFileSize(file)
    if (!sizeValidation.valid) {
      invalidFiles.push(sizeValidation.message!)
      continue
    }

    // 使用团队聊天专用的文件类型验证（允许exe文件）
    const typeValidation = validateTeamChatFileType(file)
    if (!typeValidation.valid) {
      invalidFiles.push(typeValidation.message!)
    }
  }
  
  if (invalidFiles.length > 0) {
    ElMessage.error(invalidFiles.join('; '))
    return
  }
  
  // 开始上传
  for (const file of files) {
    const uploadId = Date.now().toString() + Math.random().toString(36).substring(2, 11)
    
    // 添加到上传列表
    uploadingFiles.value.push({
      id: uploadId,
      fileName: file.name,
      progress: 0,
      status: 'uploading'
    })

    // 监听上传进度
    const progressInterval = setInterval(() => {
      const uploadItem = uploadingFiles.value.find(item => item.id === uploadId)
      if (uploadItem && uploadItem.status === 'uploading') {
        // 从useFileUpload获取实际进度
        // uploadSessions是一个Map，需要遍历查找匹配的会话
        for (const [, session] of uploadSessions) {
          if (session.fileName === file.name && session.fileSize === file.size) {
            uploadItem.progress = session.progress
            break
          }
        }
      } else {
        clearInterval(progressInterval)
      }
    }, 500) // 每500ms更新一次进度
    
    try {
      // 使用现有上传服务
      const result = await uploadFiles([file])
      console.log('📁 文件上传结果:', result)

      if (result && result.length > 0) {
        const uploadedFile = result[0]
        console.log('📄 上传的文件信息:', uploadedFile)

        // 构建文件URL - 匹配后端Controller路径格式
        const fileUrl = `/api/files/${uploadedFile.id}/download`

        // 发送文件消息
        const fileContent = `[${messageType === 'image' ? '图片' : '文件'}] ${uploadedFile.originalName || file.name}`
        const success = await teamChatStore.sendTeamMessage(props.teamId, fileContent, messageType, {
          fileName: uploadedFile.originalName || file.name,
          fileSize: uploadedFile.fileSize || file.size,
          fileUrl: fileUrl
        })

        if (success) {
          // 更新上传状态
          const uploadItem = uploadingFiles.value.find(item => item.id === uploadId)
          if (uploadItem) {
            uploadItem.progress = 100
            uploadItem.status = 'completed'
          }

          ElMessage.success(`${messageType === 'image' ? '图片' : '文件'}发送成功`)
        } else {
          throw new Error('消息发送失败')
        }
      } else {
        throw new Error('文件上传失败，未返回有效结果')
      }
    } catch (error) {
      console.error('文件发送失败:', error)

      // 更新上传状态为失败
      const uploadItem = uploadingFiles.value.find(item => item.id === uploadId)
      if (uploadItem) {
        uploadItem.status = 'failed'
        uploadItem.progress = 0
      }

      ElMessage.error(`${messageType === 'image' ? '图片' : '文件'}发送失败: ${(error as Error).message || '未知错误'}`)
    }
  }
  
  // 3秒后清理已完成的上传项
  setTimeout(() => {
    uploadingFiles.value = uploadingFiles.value.filter(item => item.status === 'uploading')
  }, 3000)
}

const searchMessages = async () => {
  if (!searchKeyword.value.trim()) return
  
  try {
    searchResults.value = await teamChatStore.searchMessages(props.teamId, searchKeyword.value)
  } catch (error) {
    ElMessage.error('搜索消息失败')
  }
}

const scrollToMessage = (messageId: number) => {
  // TODO: 实现滚动到指定消息
  showSearchDialog.value = false
}

// 全屏切换方法
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value

  // 通过事件通知父组件切换全屏状态
  const event = new CustomEvent('toggle-fullscreen', {
    detail: { isFullscreen: isFullscreen.value }
  })
  window.dispatchEvent(event)
}

const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

const formatTime = (timestamp: number) => {
  return new Date(timestamp).toLocaleString()
}

// 生命周期
onMounted(async () => {
  // 初始化聊天室
  await teamChatStore.initTeamChat(props.teamId)

  // 滚动到底部
  scrollToBottom()

  // 定期刷新在线成员状态
  const refreshOnlineMembers = () => {
    teamChatStore.getTeamOnlineMembers(props.teamId)
  }

  // 立即获取一次在线成员
  refreshOnlineMembers()

  // 每30秒刷新一次在线成员
  const onlineRefreshTimer = setInterval(refreshOnlineMembers, 30000)

  // 监听新消息，自动滚动到底部
  watch(messages, () => {
    scrollToBottom()
  }, { deep: true })

  // 清理定时器
  onUnmounted(() => {
    clearInterval(onlineRefreshTimer)
  })
})

onUnmounted(() => {
  // 清理定时器
  if (typingTimer.value) {
    clearTimeout(typingTimer.value)
  }
  
  // 离开聊天室
  teamChatStore.leaveTeamChat(props.teamId)
})
</script>

<style scoped lang="scss">
.team-chat-room {
  display: flex;
  flex-direction: column;
  height: 100vh; // 使用视口高度
  max-height: 100vh; // 限制最大高度
  background: var(--el-bg-color);
  overflow: hidden; // 防止整体滚动

  // 强制重置所有文字方向
  * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    direction: ltr !important;
  }
}

.chat-header {
  flex-shrink: 0; // 防止头部被压缩
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--el-border-color-light);

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;

    .chat-icon {
      font-size: 20px;
      color: var(--el-color-primary);
    }

    .team-name {
      font-size: 16px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }

    // 加密状态指示器
    .encryption-indicator {
      .el-icon {
        margin-right: 4px;
      }
    }

    .encryption-task-indicator {
      .rotating {
        animation: rotate 1s linear infinite;
      }
    }
  }

  .header-right {
    display: flex;
    gap: 8px;
  }
}

.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  // 精确计算高度：100vh - 头部高度 - 输入区域高度 - 其他边距
  height: calc(100vh - 140px); // 头部约70px + 输入区域约70px
  max-height: calc(100vh - 140px);
  min-height: 300px;

  // 优化滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--el-bg-color-page);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--el-border-color);
    border-radius: 3px;

    &:hover {
      background: var(--el-border-color-dark);
    }
  }

  .messages-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    padding-bottom: 8px;
  }

  .load-more-history {
    text-align: center;
    margin-bottom: 20px;

    .el-button {
      border-radius: 20px;
      padding: 8px 24px;
      font-size: 13px;
      background: var(--el-bg-color);
      border: 1px solid var(--el-border-color-lighter);
      color: var(--el-text-color-regular);

      &:hover {
        background: var(--el-color-primary-light-9);
        border-color: var(--el-color-primary-light-5);
        color: var(--el-color-primary);
      }
    }
  }

  .message-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    animation: fadeInUp 0.3s ease-out;

    &.own-message {
      align-items: flex-end;
    }
  }

  .typing-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--el-bg-color);
    border-radius: 20px;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    border: 1px solid var(--el-border-color-lighter);
    animation: fadeIn 0.3s ease-out;

    .typing-icon {
      animation: spin 1s linear infinite;
      color: var(--el-color-primary);
    }
  }
}

.message-input-area {
  flex-shrink: 0; // 防止输入区域被压缩
  border-top: 1px solid var(--el-border-color-light);
  background: var(--el-bg-color);

  .upload-progress-area {
    padding: 8px 20px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    background: var(--el-bg-color-page);

    .upload-summary {
      display: flex;
      align-items: center;
      gap: 8px;

      .upload-icon {
        color: var(--el-color-primary);
        font-size: 16px;
      }

      .upload-text {
        flex: 1;
        font-size: 14px;
        color: var(--el-text-color-primary);
      }

      .el-button {
        font-size: 12px;
      }
    }
  }

  .main-input-area {
    padding: 16px 5px;

    .input-wrapper {
      margin-bottom: 12px;

      .message-input {
        :deep(.el-textarea__inner) {
          //border-radius: 12px;
          border: 1px solid var(--el-border-color);
          //padding: 12px 16px;
          font-size: 14px;
          line-height: 1.5;
          resize: none;
          transition: all 0.2s ease;

          &:focus {
            border-color: var(--el-color-primary);
            box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
          }

          &::placeholder {
            color: var(--el-text-color-placeholder);
          }
        }
      }
    }

    .input-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .input-toolbar {
        display: flex;
        gap: 4px;

        .toolbar-btn {
          padding: 8px;
          border-radius: 8px;
          color: var(--el-text-color-regular);
          transition: all 0.2s ease;

          &:hover {
            background: var(--el-color-primary-light-9);
            color: var(--el-color-primary);
          }

          .el-icon {
            font-size: 18px;
          }
        }
      }

      .send-area {
        display: flex;
        align-items: center;
        gap: 12px;

        .char-count {
          font-size: 12px;
          color: var(--el-text-color-secondary);
          user-select: none;
        }

        .send-btn {
          border-radius: 5px;
          padding: 8px 20px;
          font-weight: bold;
          transition: all 0.2s ease;

          &:not(:disabled):hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px var(--el-color-primary-light-5);
          }

          &:disabled {
            opacity: 0.6;
          }
        }
      }
    }
  }
}

.search-container {
  .search-results {
    margin-top: 16px;
    max-height: 400px;
    overflow-y: auto;

    .search-result-item {
      padding: 12px;
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 6px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        background: var(--el-bg-color-page);
        border-color: var(--el-color-primary);
      }

      .result-sender {
        font-weight: 600;
        color: var(--el-color-primary);
        font-size: 14px;
        margin-bottom: 4px;
      }

      .result-content {
        color: var(--el-text-color-primary);
        margin-bottom: 4px;
        word-break: break-word;
      }

      .result-time {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .chat-header {
    padding: 12px 16px;

    .header-left .team-name {
      font-size: 14px;
    }
  }

  .messages-container {
    padding: 12px 16px;
    height: calc(100vh - 120px); // 移动端调整高度
    max-height: calc(100vh - 120px);
  }

  .message-input-area {
    .main-input-area {
      padding: 12px 16px;

      .input-controls {
        .send-area {
          .char-count {
            display: none; // 移动端隐藏字符计数
          }
        }
      }
    }
  }
}

// 传输进度弹窗样式
.transfer-dialog-content {
  .empty-state {
    text-align: center;
    padding: 20px;
  }

  .upload-list {
    .upload-item-dialog {
      margin-bottom: 16px;
      padding: 12px;
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 8px;
      background: var(--el-bg-color-page);

      &:last-child {
        margin-bottom: 0;
      }

      .file-info {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 8px;

        .el-icon {
          color: var(--el-color-primary);
          font-size: 20px;
        }

        .file-details {
          flex: 1;

          .file-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--el-text-color-primary);
            margin-bottom: 2px;
          }

          .file-status {
            font-size: 12px;
            color: var(--el-text-color-regular);
          }
        }

        .progress-info {
          font-size: 14px;
          font-weight: 500;
          color: var(--el-color-primary);
        }
      }
    }
  }
}

// 动画
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
